<!--
 * @Author: [you name]
 * @Date: 2021-09-22 14:16:56
 * @LastEditors: [you name]
 * @LastEditTime: 2021-10-21 10:57:28
 * @Description: 
-->
<template>
  <div>
    <Header></Header>
    <!-- {{listData}} -->
    <!-- {{ this.$route.query }} -->
    {{category}}
    <div class="content">
      <div class="wrapper1">
        <!-- 分类栏部分 -->
        <div class="category_top">
          <span>{{ category.name }}</span>
        </div>

        <!-- 列表部分 listData.total接口有数据才显示-->
        <div class="contentMain" v-if="Data.total > 0">
          <ul>
            <li v-for="c in listData" :key="c.id">
              <!-- 日期 -->
              <div class="time">
                <!-- 日历的头部样式 -->
                <div class="dateTop"><span>公历</span></div>
                <div class="dateTime">
                  {{ c.publishTime | fmtDate }}
                </div>
              </div>
              <!-- 图片 -->
              <div class="img" @click="toList(c)">
                <img :src="c.cover" alt="" />
              </div>
              <!-- 标题内容 -->
              <div class="titleContent">
                <div class="contentTop" @click="toList(c)">{{ c.title }}</div>
                <div class="contentBottom">
                  <div class="contentArt" v-html="c.content">
                    {{ c.content }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="fenye">
            <!-- 分页 -->
            <el-pagination
              background
              big
              @current-change="handleCurrentChange"
              :current-page.sync="params.page"
              :page-size="params.pageSize"
              layout="total, prev, pager, next"
              :total="Data.total"
            >
            </el-pagination>
          </div>
        </div>

        <!-- 如果接口没有数据就显示没有数据 -->
        <div class="noData" v-else>暂无数据</div>
      </div>
    </div>
    <!-- 底部 -->
     <!-- 友情链接部分 -->
    <div class="friendLink">
      <div class="wrapper1">
        <div class="linkContent">
          <!-- 上面部分 -->
          <div class="linkTop">
            <div class="lian">
              友情链接
              <div class="lianIcon"></div>
            </div>
          </div>
          <!-- 下面部分 -->
          <div class="linkBottom">
            <li><a href="https://www.hnu.edu.cn/">湖南大学</a></li>
            <li><a href="http://admi.hnu.edu.cn/">湖南大学招生信息网</a></li>
            <li><a href="http://scc.hnu.edu.cn/">湖南大学就业网</a></li>
            <li><a href="http://ylsy.hnu.edu.cn/">湖南大学岳麓书院 </a></li>

            <!-- 四个图标 -->
            <div class="mainIcon">
              <div class="icon1">
                <a
                  href="https://weibo.com/hunanuniversity?refer_flag=2725420000_weiboxiu&is_hot=1"
                  ><img src="https://news.hnu.edu.cn/images/ico1.png" alt=""
                /></a>
              </div>
              <div class="icon2">
                <a href=""
                  ><img src="https://news.hnu.edu.cn/images/ico2.png" alt=""
                /></a>
              </div>
              <div class="icon3">
                <a
                  href="https://www.douyin.com/user/MS4wLjABAAAAuhWu55VCSTU90lyS43EBdMhpkJOjIglBn10B9EvIiI4?enter_method=search_result&extra_params=%7B%22search_id%22%3A%2220211002230738010133028142243558BD%22%2C%22search_result_id%22%3A%2258320597826%22%2C%22search_keyword%22%3A%22%E6%B9%96%E5%8D%97%E5%A4%A7%E5%AD%A6%22%2C%22search_type%22%3A%22user%22%7D&enter_from=search_result"
                  ><img src="https://news.hnu.edu.cn/images/ico3.png" alt=""
                /></a>
              </div>
              <div class="icon4">
                <a href="https://space.bilibili.com/391952271"
                  ><img src="https://news.hnu.edu.cn/images/ico4.png" alt=""
                /></a>
              </div>
            </div>

            <!-- 微信二维码 -->
            <div class="erweima">
              <img src="https://news.hnu.edu.cn/images/ico6.jpg" alt="">
            </div>

          </div>
        </div>
      </div>
    </div>
   <!-- 底部 -->
    <div class="footer">
      <div class="footerMain">
        <ul>
          <li>版权所有：湖南大学党委宣传部（新闻办公室)</li>
          <li>技术支持：湖南大学互联网信息服务研究中心</li>
          <li>热线电话：88822804 | 88823984 </li>
          <li>邮箱：news@hnu.edu.cn</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import { get } from "../utils/request";
export default {
  components: {
    Header,
  },
  data() {
    return {
      // 接收分类栏
      category: {},
      //封装参数
      params: {
        page: 1,
        pageSize: 5,
      },
      listData: [],
      Data: [],
      
      
    };
  },

  methods: {

   


    // 从图片跳转到文章详情
    toList (item){
      this.$router.push({
        path:'./article',
        query : item
      })
    },

    //分页
    handleCurrentChange(val) {
      this.params.page = val;
      this.getListData();
      // console.log(`当前页: ${val}`);
    },

    //从接口拿到当前栏目的数据
    getListData() {
      //拿到当前栏目分类的categoryId
      this.params.categoryId = this.category.id;
      get("/index/article/pageQuery", this.params).then((res) => {
        console.log(res);
        this.listData = res.data.list;
        this.Data = res.data;
      });
    },
  },

  //监听器
  watch: {
    //传过来变成字符串
    "$route.query": {
      handler(query) {
        //序列化
        // alert(JSON.stringify(query));
        this.category = query;
        this.getListData();
        // 每次我们点击菜单栏的时候 将page重置为第一页
        this.params.page = 1;
      },
    },
  },
  created() {
    this.category = this.$route.query;
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 1450px;
  .wrapper1 {
    .category_top {
      width: 100%;
      height: 48px;
      background-color: rgba(223, 210, 209, 0.342);
      margin-top: 25px;
      color: #333;
      line-height: 48px;
      font-size: 21px;
      span {
        margin-left: 20px;
      }
    }

    .contentMain {
      height: 600px;
      // background-color: rgb(238, 32, 32);
      // margin-top: 30px;
      ul {
        width: 100%;
        li {
          // display: flex;
          height: 180px;
          padding: 38px 30px;
          border-bottom: 1px solid rgba(51, 51, 51, 0.315);
          overflow: hidden;
          color: #333;
          position: relative;
          overflow: hidden;
          transition:all 0.3s ease-in-out;

          .time {
            position: absolute;
            left: 0;
            // flex: 1;
            height: 180px;
            // border: 1px solid #333;
            // border-top: 3px solid rgb(218, 0, 0);
            box-sizing: border-box;
            width: 182px;
            .dateTop {
              height: 30px;
              background-color: #c91111;
              width: 78%;
              box-sizing: border-box;
              margin: 0 20px;
              border: 1px solid #333;
              font-size: 18px;
              color: #fff;
              text-align: center;
            }
            .dateTime {
              height: 80px;
              background-color: #f7f7f7;
              width: 78%;
              box-sizing: border-box;
              margin: 0 20px;
              border: 1px solid #333;
              text-align: center;
              font-size: 20px;
              color: #e41111;
              font-weight: bold;
              line-height: 60px;
            }
          }
          .img {
            // flex: 1.5;
            height: 180px;
            position: absolute;
            left: 180px;
            cursor: pointer;
            img {
              // width: 100%;
              height: 180px;
              border: 1px solid rgba(51, 51, 51, 0.452);
            }
          }
          .titleContent {
            position: absolute;
            left: 450px;
            // flex: 4;
            height: 180px;
            // border: 1px solid #333;
            display: flex;
            flex-direction: column;
            .contentTop {
              cursor: pointer;
              flex: 1;
              // border: 1px solid rgb(245, 6, 6);
              line-height: 60px;
              box-sizing: border-box;
              font-size: 20px;
              font-weight: bold;
              padding-left: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              // white-space: nowrap;
            }
            .contentBottom {
              cursor: pointer;
              flex: 2;
              // border: 1px solid rgb(96, 10, 235);
              font-size: 12px;
              box-sizing: border-box;
              overflow: hidden;
              .contentArt {
                height: 80px;
                width: 100%;
                // border: 1px solid rgb(96, 10, 235);
                // margin-top: 17px;
                padding: 0 30px;
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 13px;
                line-height: 2em;
                position: relative;
                cursor: pointer;
                p {
                  .vsbcontent_start {
                    color: aqua;
                  }
                }
              }
            }
          }
        }
        li:hover {
          content: "";
          background-color: #f7e708b9;
          color: #fff;
          // height: 250px;
          // width: 1237px;
          // box-sizing: border-box;
          // background: url(http://pkunews.pku.edu.cn/images/li_bg3.svg) no-repeat 25px center;
          // display: block;
          // position: absolute;
          // z-index: 10;
          // width: 100%;
          // height: 0;
          // left: 0%;
          // top: 50%;
          // background-size: 50% 50%;
          // background-repeat: no-repeat;
          border-radius: 0 15px 0 15px;
        }
        @keyframes all {
        }
      }
    }

    .fenye {
      margin-top: 30px;
      margin-left: 500px;
    }
  }

  .noData {
    height: 80px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
  }
}

// 友情链接部分
.friendLink {
  .wrapper1 {
    .linkContent {
      height: 150px;
      width: 100%;
      margin-top: 30px;
      .linkTop {
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        border-bottom: 1px solid #d11d29;
        .lian {
          margin-left: 10px;
          color: #b1040e;
          width: 100px;
          text-align: center;
          border-bottom: 2px solid #d11d29;
          box-sizing: border-box;
          position: relative;
          .lianIcon {
            height: 0;
            width: 0;
            border: 5px solid transparent;
            border-bottom: 5px solid #b1040e;
            position: absolute;
            top: 40px;
            left: 46px;
          }
        }
      }
      .linkBottom {
        height: 95px;
        position: relative;
        li {
          width: 200px;
          float: left;
          height: 95px;
          line-height: 95px;
          margin-left: 10px;
          color: #b1040e;
        }

        //四个图标
        .mainIcon {
          margin-top: 20px;
          width: 250px;
          height: 52px;
          position: absolute;
          right: 0;
          display: flex;
        }
        .icon1 {
          flex: 1;
          img {
            width: 55px;
          }
        }
        .icon2 {
          flex: 1;
          img {
            width: 55px;
          }
         
        }
        .icon2 a img:hover .erweima{
          display: block;
        }
        .icon3 {
          flex: 1;
          img {
            width: 55px;
          }
        }
        .icon4 {
          flex: 1;
          img {
            width: 55px;
          }
        }
      }
       .erweima{
            display: inline-block;
            width: 129px;
            height: 129px;
            background-color: cyan;
            margin-top: 75px;
            margin-left: 175px;
            display: none;
          }

    }
  }
}

// 底部
.footer {
  margin-top: 40px;
  height: 200px;
  width: 100%;
  background-color: rgb(212, 11, 11);
  background: url(https://www.hnu.edu.cn/images/hn-foot-bg.jpg);
  position: relative;
  .footerMain{
    width: 85%;
    height: 50px;
    // background-color: rgb(41, 211, 78);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -618.5px;
    margin-top: -30px;
    ul{
      li{
        float: left;
        // background-color: rgb(82, 52, 255);
        color:#fff;
        line-height: 50px;
      }
      li:nth-child(n+2){
        margin-left: 90px;

      }
    }
  }
}
</style>